<template>
  <view class="container">
    <view style="display: flex">
      <!-- 左侧列表区域 -->
      <scroll-view scroll-y="true" class="leftscrool">
        <view :class="{ leftscroolitem: true, common: checktype == index }" v-for="(item, index) in countryList" :key="item.id" @click="querycity(item, index)">
          {{ currentlang == 'zh-Hans' ? item.cn : currentlang == 'ru' ? item.ru : currentlang == 'en' ? item.en : '' }}
        </view>
      </scroll-view>
      <!-- 右侧列表区域 -->
      <scroll-view scroll-y="true" style="box-sizing: border-box; height: 1140rpx">
        <view class="rightitem" v-for="(item, index) in cityList" :key="item.id" @click="okCity(item)">
          {{ currentlang == 'zh-Hans' ? item.cn : currentlang == 'ru' ? item.ru : currentlang == 'en' ? item.en : '' }}
        </view>
      </scroll-view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import footerCom from '@/components/shopfooter/shopfooter.vue';
import { countrylist, city, chinesecity } from '@/services/crountry.js';
export default {
  components: {
    footerCom
  },
  onLoad() {
    // 获取所有国家列表
    this.getcountryList();
    // 获取地区列表
    this.querycity();
    this.currentlang = uni.getLocale();
  },
  data() {
    return {
      countryList: [],
      checktype: 0,
      currentlang: '',
      cityList: [],
      currentCity: '',
      currenCountry: ''
    };
  },
  methods: {
    // 获取所有国家列表
    async getcountryList() {
      const res = await countrylist();

      this.countryList = res.result.data;
    },
    // 获取国家下的地区
    async querycity(item, index) {
      this.checktype = index;
      console.log(item);
      this.currenCountry = this.currentlang == 'zh-Hans' ? item.cn : this.currentlang == 'ru' ? item.ru : this.currentlang == 'en' ? item.en : '';
      const res = await city(item.en);
      console.log('地区列表----', res);
      this.cityList = res.result.data;
    },
    // 获取当前选择的地区
    okCity(cityobj) {
      console.log(cityobj);
      console.log('当前语言----', this.currentlang);
      this.currentCity = this.currentlang == 'zh-Hans' ? cityobj.cn : this.currentlang == 'ru' ? cityobj.ru : this.currentlang == 'en' ? cityobj.en : '';
      if (getCurrentPages()[getCurrentPages().length - 2].route.includes('shophome')) {
        uni.redirectTo({
          url: '/sub_shop/shophome/shophome?city=' + this.currentCity
        });
      } else if (getCurrentPages()[getCurrentPages().length - 2].route.includes('myshop')) {
        uni.navigateTo({
          url: '/sub_my/myshop/myshop?area=' + this.currenCountry + ',' + this.currentCity
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .leftscrool {
    box-sizing: border-box;
    width: 220rpx;
    height: 1140rpx;
    .leftscroolitem {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      width: 200rpx;
      height: 100rpx;
    }
  }
  .rightitem {
    box-sizing: border-box;
    padding: 30rpx 68rpx;

    width: 510rpx;
    height: 100rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .common {
    border-left: 10rpx solid #61bdb2;
    background-color: #ffffff;
  }
}
</style>
